<template>
	<view class="item-container">
		<view class="item-body">
			<text class="item-title">{{ info.title }}</text>
			<view class="item-bottom">
				<view class="item-comment-count">{{info.comment_count}} 评论 ·</view>
				<view class="item-like-count">{{ info.like_count }} 赞 ·</view>
				<view>{{ info.author.name }}</view>
			</view>
		</view>
		<image :src="info.cover" mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		name:"HotItem",
		props: {
			info: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.item-container{
	display: flex;
	background-color: #fff;
	padding: 20rpx;
	margin: 10rpx 0;
}
.item-container image {
	width: 100rpx;
	height: 100rpx;
}
.item-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.item-title {
	font-size: 28rpx;
	font-weight: 600;
	line-height: 40rpx;
	height: 80rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
.item-bottom {
	display: flex;
	font-size: 20rpx;
	color: #8891ab;
}
.item-bottom view {
	margin-right: 8rpx;
}
</style>
